<template>
  <div class="box">
    <div class="box_item">
      <!-- 菜单列表 -->
      <div class="item_list">
        <div class="menu_card" v-for="(item, index) in menuList" :key="item.id"
          :class="{ active: isRolling || currentWinner === index }" @click="showItemDetail(item, index)"
          >
         
          <div class="food_img" :style="{ backgroundColor: item.color }">
           
            <div class="mask">
              <span class="mask_name">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <button class="draw_btn" @click="startDraw" :disabled="isRolling">
        {{ isRolling ? `抽奖中(${Math.ceil(remainingTime)}s)` : '开始抽奖' }}
      </button>
    </div>

    <div class="modal_mask" v-if="showModal">
      <div class="modal_box">
        <h2 class="modal_title">恭喜中奖！</h2>

        <div class="modal_content_wrap">
          <div class="modal_detail">
            <p><span>菜品名称：</span>{{ menuList[currentWinner].name }}</p>
            <p><span>菜品价格：</span>{{ menuList[currentWinner].price }}</p>
            <p><span>老板名字：</span>王大厨</p>
            <p><span>老板联系方式：</span>138-8888-8888</p>
            <p><span>店铺位置：</span>美食街88号</p>
            <p><span>店铺距离：</span>1.2公里</p>
            <p><span>营业时间：</span>10:00-22:00</p>
            <p><span>店铺卫生情况：</span>★★★★★</p>
          </div>

          <div class="modal_recommend">
            <h3 class="recommend_title">店铺推荐</h3>
            <div class="recommend_list">
              <div class="recommend_item" v-for="(item, i) in recommendList" :key="i">
                <div class="recommend_img" :style="{ backgroundColor: item.color }"></div>
                <div class="recommend_info">
                  <p class="recommend_name">{{ item.name }}</p>
                  <p class="recommend_price">{{ item.price }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal_btns">
          <button class="modal_btn close_btn" @click="showModal = false">关闭</button>
          <button class="modal_btn detail_btn" @click="goToShopDetail">店铺详情</button>
        </div>
      </div>
    </div>

    <div class="modal_mask" v-if="showItemModal">
      <div class="modal_box">
        <h2 class="modal_title">{{ selectedItem.name }} 详情</h2>

        <div class="dish_image" :style="{ backgroundColor: selectedItem.color }">
          <div class="image_overlay">{{ selectedItem.name }}</div>
        </div>

        <div class="modal_content_wrap">
          <div class="modal_detail">
            <p><span>菜品名称：</span>{{ selectedItem.name }}</p>
            <p><span>菜品价格：</span>{{ selectedItem.price }}</p>
            <p><span>菜品描述：</span>{{ selectedItem.desc || '精选优质食材，匠心制作' }}</p>
            <p><span>推荐指数：</span>★★★★☆</p>
          </div>

          <div class="modal_shop">
            <h4 class="shop_title">店铺信息</h4>
            <p><span>老板名字：</span>王大厨</p>
            <p><span>联系方式：</span>138-8888-8888</p>
            <p><span>店铺位置：</span>美食街88号</p>
            <p><span>营业时间：</span>10:00-22:00</p>
            <p><span>卫生情况：</span>★★★★★</p>
          </div>
        </div>

        <button class="modal_btn close_btn" @click="showItemModal = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,onUnmounted  } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 菜单数据（补充描述信息）
const menuList = ref([
  { id: 1, name: "黑松露牛排", price: "¥198", color: "#FF7A45", desc: "精选澳洲和牛M5级，搭配黑松露酱汁" },
  { id: 2, name: "法式香煎鹅肝", price: "¥158", color: "#64D2FF", desc: "法国进口鹅肝，搭配无花果酱与烤面包" },
  { id: 3, name: "意式蘑菇披萨", price: "¥88", color: "#FFD666", desc: "手工薄底饼皮，铺满马苏里拉芝士" },
  { id: 4, name: "芒果慕斯蛋糕", price: "¥38", color: "#FF6B9B", desc: "新鲜芒果制作，口感轻盈，甜而不腻" },
  { id: 5, name: "鲜榨草莓汁", price: "¥22", color: "#722ED1", desc: "当季新鲜草莓，无添加纯鲜榨" },
  { id: 6, name: "日式豚骨拉面", price: "¥48", color: "#FF9A2E", desc: "12小时熬制豚骨汤，搭配溏心蛋" },
  { id: 7, name: "波士顿龙虾", price: "¥368", color: "#00B4D8", desc: "鲜活波士顿龙虾，蒜蓉粉丝蒸制" },
  { id: 8, name: "法式蜗牛", price: "¥98", color: "#90E0EF", desc: "法国进口蜗牛，搭配黄油蒜蓉" },
  { id: 9, name: "提拉米苏", price: "¥58", color: "#C77DFF", desc: "经典意式甜点，咖啡酒浸泡手指饼干" },
  { id: 10, name: "意式浓缩", price: "¥32", color: "#704214", desc: "精选阿拉比卡豆，现磨现煮" },
  { id: 11, name: "墨西哥卷饼", price: "¥42", color: "#F4A261", desc: "嫩牛柳搭配蔬菜，卷入薄饼" },
  { id: 12, name: "泰式冬阴功", price: "¥68", color: "#E9C46A", desc: "泰国进口香料，酸辣开胃" },
  { id: 13, name: "三文鱼刺身", price: "¥128", color: "#F4A261", desc: "挪威进口三文鱼，新鲜现切" },
  { id: 14, name: "奶油蘑菇汤", price: "¥36", color: "#E9C46A", desc: "鲜蘑菇熬制，加入淡奶油" },
  { id: 15, name: "烤全羊排", price: "¥268", color: "#E76F51", desc: "新西兰羊排，秘制腌料烤制" }
])

// 推荐菜品
const recommendList = ref([
  { name: "芝士焗龙虾", price: "¥268", color: "#FF4B3B" },
  { name: "奶油南瓜汤", price: "¥32", color: "#FFD166" },
  { name: "黑森林蛋糕", price: "¥42", color: "#8B4513" }
])

// 抽奖状态管理
const isRolling = ref(false)
const currentWinner = ref(-1)
const showModal = ref(false)
const rollTimer = ref(null)
const remainingTime = ref(8)
const totalDuration = 8000

// 新增：菜品详情状态管理
const selectedItem = ref({})
const showItemModal = ref(false)

// 开始抽奖
const startDraw = () => {
  if (isRolling.value) return

  isRolling.value = true
  currentWinner.value = -1
  showModal.value = false
  remainingTime.value = 8
  let startTime = Date.now()

  const speedCurve = [
    { time: 0, speed: 100 },
    { time: 1000, speed: 60 },
    { time: 3000, speed: 40 },
    { time: 5000, speed: 80 },
    { time: 7000, speed: 150 }
  ]

  const timeTimer = setInterval(() => {
    const elapsed = Date.now() - startTime
    remainingTime.value = Math.max(0, 8 - elapsed / 1000)
  }, 100)

  const roll = () => {
    const elapsed = Date.now() - startTime
    let currentSpeed = 100

    for (let i = 0; i < speedCurve.length - 1; i++) {
      if (elapsed >= speedCurve[i].time && elapsed < speedCurve[i + 1].time) {
        const ratio = (elapsed - speedCurve[i].time) / (speedCurve[i + 1].time - speedCurve[i].time)
        currentSpeed = speedCurve[i].speed + ratio * (speedCurve[i + 1].speed - speedCurve[i].speed)
        break
      }
    }

    currentWinner.value = Math.floor(Math.random() * menuList.value.length)

    if (elapsed >= totalDuration) {
      clearInterval(rollTimer.value)
      clearInterval(timeTimer)
      isRolling.value = false
      showModal.value = true
      return
    }

    rollTimer.value = setTimeout(roll, currentSpeed)
  }

  roll()
}

// 跳转到店铺详情
const goToShopDetail = () => {
  showModal.value = false
  router.push('/detail')
}

// 新增：显示菜品详情
const showItemDetail = (item, index) => {
  // 抽奖中不响应点击
  if (isRolling.value) return

  selectedItem.value = item
  showItemModal.value = true
}

// 组件销毁时清除定时器
onUnmounted(() => {
  if (rollTimer.value) {
    clearTimeout(rollTimer.value)
  }
})
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 910px;
  background-image: url('../assets/image/bg1.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;

  .box_item {
    width: 90%;
    max-width: 1800px;
    height: 600px;
    margin-top: 10px;
    position: relative;

    .item_list {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
      padding: 20px;
      height: auto;
      overflow-y: auto;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    // 菜单卡片
    .menu_card {
      width: 100px;
      height: 100px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transform-style: preserve-3d;

      &:not(.active) {
        filter: grayscale(60%) brightness(0.8);
        transition: all 0.5s ease;
      }

      &.active {
        animation:
          rotate 0.8s linear infinite,
          glow 0.6s infinite alternate;
        filter: grayscale(0) brightness(1.2);
        z-index: 10;
      }

      .food_img {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;

        // 悬停遮罩层（半透明效果）
        .mask {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(50, 50, 50, 0.5); // 半透明背景（核心修改）
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;

          .mask_name {
            color: white;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            padding: 0 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        // 悬停时显示遮罩
        &:hover .mask {
          opacity: 1;
        }
      }
    }

    .draw_btn {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 220px;
      height: 55px;
      background: linear-gradient(135deg, #ff3e71, #ff9a2e);
      color: white;
      border: none;
      border-radius: 30px;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 6px 20px rgba(255, 62, 113, 0.4);
      letter-spacing: 1px;

      &:hover {
        transform: translateX(-50%) scale(1.05);
        box-shadow: 0 8px 25px rgba(255, 62, 113, 0.6);
      }

      &:disabled {
        background: #ccc;
        cursor: not-allowed;
        box-shadow: none;
        transform: translateX(-50%) scale(1);
      }
    }
  }
}



.modal_mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  .modal_box {
    width: 900px; /* 统一基础宽度 */
    background: white;
    border-radius: 10px;
    padding: 30px;
    position: relative;

    .modal_title {
      text-align: center;
      color: #ff4b2b;
      margin-bottom: 20px;
      font-size: 24px;
    }

    // 菜品图片（仅菜品详情弹窗使用，中奖弹窗不显示）
    .dish_image {
      width: 200px;
      height: 200px;
      margin: 0 auto 20px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

      .image_overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 8px 0;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
      }
    }

    .modal_content_wrap {
      display: flex;
      gap: 30px; /* 统一间距 */
      margin: 20px 0;

      .modal_detail {
        flex: 1;
        line-height: 2.2;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 8px;

        span {
          display: inline-block;
          width: 130px;
          font-weight: bold;
          color: #333;
        }
      }

      // 店铺信息（共用样式）
      .modal_shop {
        width: 300px;
        line-height: 2.2;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 8px;

        .shop_title {
          font-size: 18px;
          margin-bottom: 10px;
          color: #333;
          border-left: 4px solid #ff4b2b;
          padding-left: 10px;
        }

        span {
          display: inline-block;
          width: 100px;
          font-weight: bold;
          color: #333;
        }
      }

      // 推荐菜品（仅中奖弹窗使用）
      .modal_recommend {
        width: 300px;

        .recommend_title {
          font-size: 18px;
          margin-bottom: 15px;
          color: #333;
          border-left: 4px solid #ff4b2b;
          padding-left: 10px;
        }

        .recommend_list {
          display: flex;
          flex-direction: column;
          gap: 15px;
        }

        .recommend_item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px;
          background: #f9f9f9;
          border-radius: 6px;

          .recommend_img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
          }

          .recommend_info {
            .recommend_name {
              font-weight: 600;
              margin-bottom: 5px;
            }

            .recommend_price {
              color: #ff4d4f;
              font-size: 14px;
            }
          }
        }
      }
    }

    // 中奖弹窗按钮组
    .modal_btns {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;

      .modal_btn {
        width: 150px;
        height: 45px;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .close_btn {
        background: #ccc;
        color: #333;

        &:hover {
          background: #bbb;
        }
      }

      .detail_btn {
        background: #ff4b2b;
        color: white;

        &:hover {
          background: #e03e20;
        }
      }
    }

    // 菜品详情弹窗单独按钮
    .modal_close {
      width: 100%;
      height: 45px;
      margin-top: 20px;
      background: #ff4b2b;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: #e03e20;
      }
    }
  }
} 


// // 旋转动画（X/Y轴同时旋转，更有立体感）
// @keyframes rotate {
//   0% {
//     transform: rotateX(0deg) rotateY(0deg) scale(1);
//     box-shadow: 0 0 20px rgba(255, 62, 113, 0.5),
//       inset 0 0 10px rgba(255, 255, 255, 0.3);
//   }

//   25% {
//     transform: rotateX(15deg) rotateY(15deg) scale(1.05);
//     box-shadow: 0 0 30px rgba(255, 62, 113, 0.6),
//       inset 0 0 15px rgba(255, 255, 255, 0.4);
//   }

//   50% {
//     transform: rotateX(0deg) rotateY(30deg) scale(1.1);
//     box-shadow: 0 0 40px rgba(255, 62, 113, 0.7),
//       inset 0 0 20px rgba(255, 255, 255, 0.5);
//   }

//   75% {
//     transform: rotateX(-15deg) rotateY(15deg) scale(1.05);
//     box-shadow: 0 0 30px rgba(255, 62, 113, 0.6),
//       inset 0 0 15px rgba(255, 255, 255, 0.4);
//   }

//   100% {
//     transform: rotateX(0deg) rotateY(0deg) scale(1);
//     box-shadow: 0 0 20px rgba(255, 62, 113, 0.5),
//       inset 0 0 10px rgba(255, 255, 255, 0.3);
//   }
// }

// // 发光动画
// @keyframes glow {
//   from {
//     box-shadow: 0 0 15px rgba(255, 62, 113, 0.6);
//   }

//   to {
//     box-shadow: 0 0 30px rgba(255, 62, 113, 0.9);
//   }
// }
</style>